<!DOCTYPE html>
<html>
  <head>
    <meta charset=" utf-8" />
    <meta name="author" content="https://www.51qianduan.com/" />
    <title>51前端</title>
    <style type="text/css">
      #container {
        width: 1000px;
        height: 600px;
        border: 1px #bfbfbf solid;
      }
    </style>
    <script type="text/javascript">
      function makedot(x, y) {
        pointDiv =
          "<div style='height:1px;position:absolute;left:" +
          x +
          "px;top:" +
          y +
          "px;width:1px;background:#f00;overflow:hidden'></div>";
        return pointDiv;
      }

      function line(x1, y1, x2, y2) {
        var slope; //斜率
        var direction; //坐标运动方向
        var tx = x2 - x1;
        var ty = y2 - y1;
        if (tx == 0 && ty == 0) return;
        var points = "";
        var axis; //坐标轴上的坐标
        if (Math.abs(tx) >= Math.abs(ty)) {
          //在x轴上移动
          direction = tx > 0 ? 1 : -1;
          tx = Math.abs(tx);
          slope = ty / tx;
          axis = x1;
          for (i = 0; i < tx; i++) {
            points += makedot(axis, y1 + i * slope);
            axis += direction;
          }
        } else {
          //在y轴上移动
          direction = ty > 0 ? 1 : -1;
          ty = Math.abs(ty);
          slope = tx / ty;
          axis = y1;
          for (i = 0; i < ty; i++) {
            points += makedot(x1 + i * slope, axis);
            axis += direction;
          }
        }
        var container = document.getElementById("container");
        container.innerHTML += points;
      }
      var oldPoint = null;
      //获取鼠标位置
      function mousePosition(ev) {
        ev = ev || window.event;
        if (ev.pageX || ev.pageY) {
          return { x: ev.pageX, y: ev.pageY };
        }
        var doc = document.documentElement,
          body = document.body;
        var pageX =
          event.clientX +
          ((doc && doc.scrollLeft) || (body && body.scrollLeft) || 0) -
          ((doc && doc.clientLeft) || (body && body.clientLeft) || 0);
        var pageY =
          event.clientY +
          ((doc && doc.scrollTop) || (body && body.scrollTop) || 0) -
          ((doc && doc.clientTop) || (body && body.clientTop) || 0);
        return { x: pageX, y: pageY };
      }

      function recordPoint(ev) {
        var point = mousePosition(ev);
        if (oldPoint != null) {
          line(oldPoint.x, oldPoint.y, point.x, point.y);
        }
        oldPoint = point;
      }
      window.onload = function () {
        var container = document.getElementById("container");
        container.onclick = function (ev) {
          var ev = window.event || ev;
          recordPoint(ev);
        };
      };
    </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>
